<template>
	<drawer ref="drawer" :show="show" @cancel="cancel" @close="show = false" @confirm="confirm" title="具体位置">
		<view class="">
			<view class="search-bar">
				<searchBar placeholder="请输入项目/电梯关键词" @confirm="searchConfirm"></searchBar>
			</view>
			<view class="elevators">
				<selectTree ref="selectTree" @onChecked="nodeClick" :tree="filterList" :keyword="keywords"></selectTree>
				<view class="default-block" v-if="filterList.length==0">
					暂无搜索结果
				</view>

			</view>

		</view>
	</drawer>
</template>
<script>
import selectTree from '@/components/select-tree/select-tree.vue';
import searchBar from './search-bar.vue';
import drawer from '@/components/filter-drawer/drawer.vue';
export default {
	components: { drawer, selectTree, searchBar },
	props: {
		title: {
			type: String,
			default: '请选择'
		},

	},
	data() {
		return {
			keywords: '',
			options: [],
			filterList: [],
			selectedIndex: [0],
			selectedValue: null,
			show:false,
		};
	},
	methods: {
		// 搜索确认
		searchConfirm(res) {
			console.log('keywords', res);
			this.keywords = res;
			this.filterFun();
			this.$refs.selectTree.clear();
			this.selectedValue = null;
		},

		filterFun() {
			// 递归过滤 options
			function filterRecursive(list, keyword) {
				const result = [];
				for (const item of list) {
					let match = item.name && item.name.indexOf(keyword) !== -1;
					let children = [];
					if (item.children && item.children.length) {
						children = filterRecursive(item.children, keyword);
					}
					if (match || (children && children.length)) {
						const newItem = { ...item };
						if (children && children.length) {
							newItem.children = children;
						} else {
							delete newItem.children;
						}
						result.push(newItem);
					}
				}
				return result;
			}
			if (this.keywords) {
				this.filterList = filterRecursive(this.options, this.keywords);
			} else {
				this.filterList = JSON.parse(JSON.stringify(this.options));
			}
		},
		nodeClick(res) {
			console.log(res);
			this.selectedValue = res;
		},
		open(options, defaultValue = null) {
			this.options = options;
			this.filterList = JSON.parse(JSON.stringify(options));

			this.show = true;
		},

		confirm() {
			this.$emit('confirm', this.selectedValue);
			this.show = false;
		},

		cancel() {
			this.$emit('cancel');
			this.show = false;
		}
	}
};

</script>
<style lang="scss" scoped>
.elevators {
	padding-left: 22rpx;
}

.default-block{
	text-align: center;
	width: 100%;
	padding: 50rpx 0;
	font-size: 28rpx;
	color: #999;
}
</style>